#friend {
		.el-form-item {
			margin: 0;
		}

		.el-dialog__body {
			padding: 10px 50px;
		}

		.friend-list {
			.el-image {
				width: 100%;
				display: block;
				height: 150px;
				img {
					width: 100%;
					background-position: center center;
					background-repeat: no-repeat;
					background-size: cover;
					object-fit: cover;
					&:hover{
						transform: scale(1.1, 1.1);
						    -webkit-filter: contrast(130%);
						    filter: contrast(130%);
						    transition: all 0.2s linear;
					}
				}
			}

			.el-col {
				margin: 10px;
				width: 30%;

				.el-card {
					height: 240px;
					.bottom{
						font-size: 14px;
						padding-top: 10px;
						line-height: 16px;
					}
				}
			}

			.clearfix:before,
			.clearfix:after {
				display: table;
				content: "";
			}

			.clearfix:after {
				clear: both
			}
		}
	}
	@media screen and (max-width: 1024px) {
		#friend{
			padding: 5px;
			.el-dialog{
				width: 90%;
				margin-top: 15px !important;
				margin: 0 auto;
			}
			padding-top: 45px;
			.content{
				margin-top: 5px;
				padding: 10px;
			}
			.friend-header{
				font-size: 13px;
				.title{
					font-size: 16px;
				}
			}
			.statement{
				font-size: 14px;
			}
			.friend-list{
				padding: 5px;
				margin-top: 5px;
				.el-col{
					margin: 5px;
				}
				.el-card{
					height: 100px !important;
					.el-image{
						height: 60px;
					}
					font-size: 12px;
					.desc{
						padding: 3px;
						.bottom{
							font-size: 10px;
							padding: 3px;
							line-height: 10px;
						}
					}
				}
			}
		}
	}